<div class="deal-content" style="background-image:url('{$image}')">
    <div style="width: 1200px;">
        <div class="splitcontent">
            {$subName}
        </div>
        <div class="box">
            <input class="boxInput" placeholder="请输入想要搜索的内容" id="searchInput" value="{$keyword}"/>
            <div class="boxright" onclick="searchArticles()">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36"
                     height="36" viewBox="0 0 36 36" fill="none">
                    <path d="M15.75 28.5C22.7916 28.5 28.5 22.7916 28.5 15.75C28.5 8.7084 22.7916 3 15.75 3C8.7084 3 3 8.7084 3 15.75C3 22.7916 8.7084 28.5 15.75 28.5Z"
                          stroke="rgba(255, 255, 255, 1)" stroke-width="1.5" stroke-linejoin="round"
                          style="mix-blend-mode:normal">
                    </path>
                    <path stroke="rgba(255, 255, 255, 1)" stroke-width="1.5" stroke-linejoin="round"
                          stroke-linecap="round" style="mix-blend-mode:normal" d="M24.918 24.917L31.2819 31.281">
                    </path>
                </svg>
                <div class="boxrightp">搜索</div>
            </div>
            {if $keyword}
            <div class="boxright" onclick="clearSearch()" style="margin-left: 10px; background: rgba(255, 0, 0, 0.8);">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M18 6L6 18M6 6L18 18" stroke="rgba(255, 255, 255, 1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <div class="boxrightp">清空</div>
            </div>
            {/if}
        </div>

    </div>
</div>

<div class="boxone">
    <div class="boxContainer">
        <div class="boxLeft">
            <div class="box1">
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" fill="none">
                        <path d="M12 3.99982L5.33334 3.99982C4.59696 3.99982 4 4.59677 4 5.33316L4 11.9999C4 12.7363 4.59696 13.3332 5.33334 13.3332L12 13.3332C12.7364 13.3332 13.3334 12.7363 13.3334 11.9999L13.3334 5.33316C13.3334 4.59677 12.7364 3.99982 12 3.99982Z" stroke="rgba(51, 51, 51, 1)" stroke-width="1.333339810371399" stroke-linejoin="round" style="mix-blend-mode:normal" fill="#333333" >
                        </path>
                        <path d="M12 18.6685L5.33334 18.6685C4.59696 18.6685 4 19.2654 4 20.0018L4 26.6685C4 27.4049 4.59696 28.0018 5.33334 28.0018L12 28.0018C12.7364 28.0018 13.3334 27.4049 13.3334 26.6685L13.3334 20.0018C13.3334 19.2654 12.7364 18.6685 12 18.6685Z" stroke="rgba(51, 51, 51, 1)" stroke-width="1.333339810371399" stroke-linejoin="round" style="mix-blend-mode:normal" fill="#333333" >
                        </path>
                        <path d="M26.667 3.99982L20.0003 3.99982C19.2639 3.99982 18.667 4.59677 18.667 5.33316L18.667 11.9999C18.667 12.7363 19.2639 13.3332 20.0003 13.3332L26.667 13.3332C27.4034 13.3332 28.0004 12.7363 28.0004 11.9999L28.0004 5.33316C28.0004 4.59677 27.4034 3.99982 26.667 3.99982Z" stroke="rgba(51, 51, 51, 1)" stroke-width="1.333339810371399" stroke-linejoin="round" style="mix-blend-mode:normal" fill="#333333" >
                        </path>
                        <path d="M26.667 18.6685L20.0003 18.6685C19.2639 18.6685 18.667 19.2654 18.667 20.0018L18.667 26.6685C18.667 27.4049 19.2639 28.0018 20.0003 28.0018L26.667 28.0018C27.4034 28.0018 28.0004 27.4049 28.0004 26.6685L28.0004 20.0018C28.0004 19.2654 27.4034 18.6685 26.667 18.6685Z" stroke="rgba(51, 51, 51, 1)" stroke-width="1.333339810371399" stroke-linejoin="round" style="mix-blend-mode:normal" fill="#333333" >
                        </path>
                    </svg>
                </div>
                <div class="box1-p">论坛分类</div>
            </div>
            <!-- 全部分类 -->
            <div class="box2" onclick="filterByCategoryAjax(0)">
                {if $currentCateId == 0}
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path    style="mix-blend-mode:normal" fill="url(#linear_fill_5VuJbBq8xxYoovG1rHJ3f_0)"  d="M21.0846 14.6226L14.6315 21.0756C14.294 21.4135 13.8358 21.6035 13.3581 21.6035C12.8803 21.6035 12.4222 21.4135 12.0845 21.0756L4 13L4 4L13 4L21.0846 12.0845C21.7825 12.7866 21.7825 13.9205 21.0846 14.6226Z">
                        </path>
                        <path    style="mix-blend-mode:normal" fill="#FFFFFF" fill-opacity="0.11" d="M21.0846 14.6226L14.6315 21.0756C14.294 21.4135 13.8358 21.6035 13.3581 21.6035C12.8803 21.6035 12.4222 21.4135 12.0845 21.0756L4 13L4 4L13 4L21.0846 12.0845C21.7825 12.7866 21.7825 13.9205 21.0846 14.6226Z">
                        </path>
                        <path d="M9.25 10.5C9.94035 10.5 10.5 9.94035 10.5 9.25C10.5 8.55965 9.94035 8 9.25 8C8 8.55965 8 9.25 8 9.25C8 9.94035 8.55965 10.5 9.25 10.5Z" fill-rule="evenodd" style="mix-blend-mode:normal" fill="#FFFFFF" >
                        </path>
                        <defs>
                            <linearGradient id="linear_fill_5VuJbBq8xxYoovG1rHJ3f_0" x1="5.72265625" y1="6.322998046875" x2="18.0556640625" y2="20.6707763671875" gradientUnits="userSpaceOnUse">
                                <stop offset="0" stop-color="#4CB68F"  />
                                <stop offset="1" stop-color="#1F5CDA"  />
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
                <div class="box2-1-menu-active-text">全部</div>
                <div class="box2-1-menu-active"></div>
                {else}
                <div>

                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path    style="mix-blend-mode:normal" fill="url(#linear_fill_Em19XiKxQN_8CIGEHSnXK_0)"  d="M21.0846 14.6226L14.6315 21.0756C14.294 21.4135 13.8358 21.6035 13.3581 21.6035C12.8803 21.6035 12.4222 21.4135 12.0845 21.0756L4 13L4 4L13 4L21.0846 12.0845C21.7825 12.7866 21.7825 13.9205 21.0846 14.6226Z">
                        </path>
                        <path    style="mix-blend-mode:normal" fill="#A5B3C0"  d="M21.0846 14.6226L14.6315 21.0756C14.294 21.4135 13.8358 21.6035 13.3581 21.6035C12.8803 21.6035 12.4222 21.4135 12.0845 21.0756L4 13L4 4L13 4L21.0846 12.0845C21.7825 12.7866 21.7825 13.9205 21.0846 14.6226Z">
                        </path>
                        <path d="M9.25 10.5C9.94035 10.5 10.5 9.94035 10.5 9.25C10.5 8.55965 9.94035 8 9.25 8C8 8.55965 8 9.25 8 9.25C8 9.94035 8.55965 10.5 9.25 10.5Z" fill-rule="evenodd" style="mix-blend-mode:normal" fill="#FFFFFF" >
                        </path>
                        <defs>
                            <linearGradient id="linear_fill_Em19XiKxQN_8CIGEHSnXK_0" x1="5.72265625" y1="6.322998046875" x2="18.0556640625" y2="20.6707763671875" gradientUnits="userSpaceOnUse">
                                <stop offset="0" stop-color="#4CB68F"  />
                                <stop offset="1" stop-color="#1F5CDA"  />
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
                <div class="box2-p">全部</div>
                {/if}
            </div>
            <!-- 动态分类列表 -->
            {volist name="cateList" id="cate"}
            <div class="box2" onclick="filterByCategoryJs({$cate.id})">

                {if $currentCateId == $cate.id}
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path    style="mix-blend-mode:normal" fill="url(#linear_fill_5VuJbBq8xxYoovG1rHJ3f_0)"  d="M21.0846 14.6226L14.6315 21.0756C14.294 21.4135 13.8358 21.6035 13.3581 21.6035C12.8803 21.6035 12.4222 21.4135 12.0845 21.0756L4 13L4 4L13 4L21.0846 12.0845C21.7825 12.7866 21.7825 13.9205 21.0846 14.6226Z">
                        </path>
                        <path    style="mix-blend-mode:normal" fill="#FFFFFF" fill-opacity="0.11" d="M21.0846 14.6226L14.6315 21.0756C14.294 21.4135 13.8358 21.6035 13.3581 21.6035C12.8803 21.6035 12.4222 21.4135 12.0845 21.0756L4 13L4 4L13 4L21.0846 12.0845C21.7825 12.7866 21.7825 13.9205 21.0846 14.6226Z">
                        </path>
                        <path d="M9.25 10.5C9.94035 10.5 10.5 9.94035 10.5 9.25C10.5 8.55965 9.94035 8 9.25 8C8 8.55965 8 9.25 8 9.25C8 9.94035 8.55965 10.5 9.25 10.5Z" fill-rule="evenodd" style="mix-blend-mode:normal" fill="#FFFFFF" >
                        </path>
                        <defs>
                            <linearGradient id="linear_fill_5VuJbBq8xxYoovG1rHJ3f_0" x1="5.72265625" y1="6.322998046875" x2="18.0556640625" y2="20.6707763671875" gradientUnits="userSpaceOnUse">
                                <stop offset="0" stop-color="#4CB68F"  />
                                <stop offset="1" stop-color="#1F5CDA"  />
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
                <div class="box2-1-menu-active-text">{$cate.title}</div>
                <div class="box2-1-menu-active"></div>
                {else}
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path    style="mix-blend-mode:normal" fill="url(#linear_fill_Em19XiKxQN_8CIGEHSnXK_0)"  d="M21.0846 14.6226L14.6315 21.0756C14.294 21.4135 13.8358 21.6035 13.3581 21.6035C12.8803 21.6035 12.4222 21.4135 12.0845 21.0756L4 13L4 4L13 4L21.0846 12.0845C21.7825 12.7866 21.7825 13.9205 21.0846 14.6226Z">
                        </path>
                        <path    style="mix-blend-mode:normal" fill="#A5B3C0"  d="M21.0846 14.6226L14.6315 21.0756C14.294 21.4135 13.8358 21.6035 13.3581 21.6035C12.8803 21.6035 12.4222 21.4135 12.0845 21.0756L4 13L4 4L13 4L21.0846 12.0845C21.7825 12.7866 21.7825 13.9205 21.0846 14.6226Z">
                        </path>
                        <path d="M9.25 10.5C9.94035 10.5 10.5 9.94035 10.5 9.25C10.5 8.55965 9.94035 8 9.25 8C8 8.55965 8 9.25 8 9.25C8 9.94035 8.55965 10.5 9.25 10.5Z" fill-rule="evenodd" style="mix-blend-mode:normal" fill="#FFFFFF" >
                        </path>
                        <defs>
                            <linearGradient id="linear_fill_Em19XiKxQN_8CIGEHSnXK_0" x1="5.72265625" y1="6.322998046875" x2="18.0556640625" y2="20.6707763671875" gradientUnits="userSpaceOnUse">
                                <stop offset="0" stop-color="#4CB68F"  />
                                <stop offset="1" stop-color="#1F5CDA"  />
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
                <div class="box2-p">{$cate.title}</div>
                {/if}


            </div>
            {/volist}
        </div>
        <div class="boxRight" id="articleContainer">
            <!-- 置顶文章和普通文章将通过接口动态加载 -->
            <div id="articleList"></div>
            <!-- 分页将通过接口动态加载 -->
            <div id="paginationContainer"></div>
        </div>
        </div>

    </div>
</div>

<script>
    function goToDetail(id) {
        location.href = '{:url("index/lt_detail")}?id=' + id;
    }

    function filterByCategory(cateId) {
        var keyword = '{$keyword}';
        var url = '{:url("index/lt_list")}?ltcate_id=' + cateId;
        if (keyword.trim()) {
            url += '&keyword=' + encodeURIComponent(keyword);
        }
        location.href = url;
    }

    function searchArticles() {
        var keyword = document.getElementById('searchInput').value;
        var currentCateId = '{$currentCateId}';
        
        // 更新URL参数
        var url = new URL(window.location);
        if (keyword.trim()) {
            url.searchParams.set('keyword', keyword);
        } else {
            url.searchParams.delete('keyword');
        }
        url.searchParams.set('page', 1);
        window.history.replaceState({}, '', url);
        
        // 加载搜索结果
        loadArticles(1);
    }

    function clearSearch() {
        location.href = '{:url("index/lt_list")}';
    }

    // 回车搜索
    document.getElementById('searchInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            searchArticles();
        }
    });
</script>

<script>
    // 页面加载完成后初始化数据
    document.addEventListener('DOMContentLoaded', function() {
        loadArticles(1);
    });

    // 加载文章列表和分页
    function loadArticles(page, cateId = null) {
        // 获取当前分类ID和搜索关键词
        var ltcateId = cateId !== null ? cateId : (new URLSearchParams(window.location.search)).get('ltcate_id') || '{$currentCateId}';
        var keyword = (new URLSearchParams(window.location.search)).get('keyword') || document.getElementById('searchInput').value || '{$keyword}';
        
        // 构建请求参数
        var params = new URLSearchParams();
        if (ltcateId > 0) {
            params.append('ltcate_id', ltcateId);
        }
        if (keyword && keyword.trim()) {
            params.append('keyword', keyword);
        }
        params.append('page', page);
        params.append('pageSize', 10); // 每页显示数量
        
        // 发起AJAX请求
        fetch('{:url("index/lt_list_api")}?' + params.toString())
            .then(response => response.json())
            .then(data => {
                if (data.code === 1) {
                    renderArticles(data.data.list);
                    renderPagination(data.data, page);
                } else {
                    document.getElementById('articleList').innerHTML = '<p>加载失败</p>';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('articleList').innerHTML = '<p>加载失败</p>';
            });
    }

    // 渲染文章列表
    function renderArticles(articles) {
        var html = '';
        
        // 检查是否有数据
        if (!articles || articles.length === 0) {
            html = '<div class="no-data">暂无数据</div>';
            document.getElementById('articleList').innerHTML = html;
            return;
        }
        
        // 分离置顶文章和普通文章
        var topArticles = articles.filter(article => article.is_top == 1);
        var normalArticles = articles.filter(article => article.is_top != 1);
        
        // 渲染置顶文章
        topArticles.forEach(function(article) {
            html += `
            <div class="boxRightBox boxRightActive" onclick="goToDetail(${article.id})">
                <div class="boxRightBox1">
                    <div style="display: flex; align-items: center; justify-content: center;">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 30 30" fill="none">
                            <path style="mix-blend-mode:normal" fill="url(#linear_fill_IMWBERT3n3aDfs4LJm1Bl_0)" d="M5 3.75C5 3.05964 5.55964 2.5 6.25 2.5L18.75 2.5L25 8.75L25 26.25C25 26.9404 24.4404 27.5 23.75 27.5L6.25 27.5C5.55964 27.5 5 26.9404 5 26.25L5 3.75Z"></path>
                            <path style="mix-blend-mode:normal" fill="#FFFFFF" fill-opacity="0.11" d="M5 3.75C5 3.05964 5.55964 2.5 6.25 2.5L18.75 2.5L25 8.75L25 26.25C25 26.9404 24.4404 27.5 23.75 27.5L6.25 27.5C5.55964 27.5 5 26.9404 5 26.25L5 3.75Z"></path>
                            <path stroke="rgba(255, 255, 255, 1)" stroke-width="1.2500001192092896" stroke-linejoin="round" stroke-linecap="round" style="mix-blend-mode:normal" d="M10 12.5L20 12.5"></path>
                            <path stroke="rgba(255, 255, 255, 1)" stroke-width="1.2500001192092896" stroke-linejoin="round" stroke-linecap="round" style="mix-blend-mode:normal" d="M10 17.5L20 17.5"></path>
                            <defs>
                                <linearGradient id="linear_fill_IMWBERT3n3aDfs4LJm1Bl_0" x1="6.9560546875" y1="5.7996826171875" x2="20.962890625" y2="26.18017578125" gradientUnits="userSpaceOnUse">
                                    <stop offset="0" stop-color="#4CB68F" />
                                    <stop offset="1" stop-color="#1F5CDA" />
                                </linearGradient>
                            </defs>
                        </svg>
                        <div class="boxRightBox1-p">${article.title}</div>
                    </div>
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="38" height="38" viewBox="0 0 38 38" fill="none">
                            <rect x="0" y="0" width="38" height="38" rx="8" style="mix-blend-mode:normal" fill="#000000"></rect>
                            <path fill-rule="evenodd" style="mix-blend-mode:normal" fill="url(#linear_fill_uIaTjcdE22yIxSATmFej8_0)" d="M22.8021 17.9718L18.0009 13.1705C17.4717 12.6414 16.6138 12.6414 16.0846 13.1705C15.5554 13.6997 15.5554 14.5576 16.0846 15.0868L19.9663 18.9685L15.9779 22.9569C15.4479 23.4869 15.4479 24.3462 15.9779 24.8762C16.5078 25.4062 17.3671 25.4062 17.8971 24.8762L22.6954 20.0779C22.8125 19.9609 22.9037 19.8277 22.969 19.6856C23.3237 19.1587 23.2681 18.4378 22.8021 17.9718Z"></path>
                            <path fill-rule="evenodd" style="mix-blend-mode:normal" fill="#FFFFFF" d="M22.8021 17.9718L18.0009 13.1705C17.4717 12.6414 16.6138 12.6414 16.0846 13.1705C15.5554 13.6997 15.5554 14.5576 16.0846 15.0868L19.9663 18.9685L15.9779 22.9569C15.4479 23.4869 15.4479 24.3462 15.9779 24.8762C16.5078 25.4062 17.3671 25.4062 17.8971 24.8762L22.6954 20.0779C22.8125 19.9609 22.9037 19.8277 22.969 19.6856C23.3237 19.1587 23.2681 18.4378 22.8021 17.9718Z"></path>
                            <defs>
                                <linearGradient id="linear_fill_uIaTjcdE22yIxSATmFej8_0" x1="12.3916015625" y1="18.4813232421875" x2="21.6259765625" y2="19.2353515625" gradientUnits="userSpaceOnUse">
                                    <stop offset="0" stop-color="#90F3CE" />
                                    <stop offset="1" stop-color="#3170F4" />
                                </linearGradient>
                            </defs>
                        </svg>
                    </div>
                </div>
                <div class="boxRightBox2">
                    ${article.content}
                </div>
            </div>
            `;
        });
        
        // 渲染普通文章
        normalArticles.forEach(function(article) {
            html += `
            <div class="boxRightBox" onclick="goToDetail(${article.id})">
                <div class="boxRightBox1">
                    <div style="display: flex; align-items: center; justify-content: center;">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 30 30" fill="none">
                            <path style="mix-blend-mode:normal" fill="url(#linear_fill_IMWBERT3n3aDfs4LJm1Bl_0)" d="M5 3.75C5 3.05964 5.55964 2.5 6.25 2.5L18.75 2.5L25 8.75L25 26.25C25 26.9404 24.4404 27.5 23.75 27.5L6.25 27.5C5.55964 27.5 5 26.9404 5 26.25L5 3.75Z"></path>
                            <path style="mix-blend-mode:normal" fill="#FFFFFF" fill-opacity="0.11" d="M5 3.75C5 3.05964 5.55964 2.5 6.25 2.5L18.75 2.5L25 8.75L25 26.25C25 26.9404 24.4404 27.5 23.75 27.5L6.25 27.5C5.55964 27.5 5 26.9404 5 26.25L5 3.75Z"></path>
                            <path stroke="rgba(255, 255, 255, 1)" stroke-width="1.2500001192092896" stroke-linejoin="round" stroke-linecap="round" style="mix-blend-mode:normal" d="M10 12.5L20 12.5"></path>
                            <path stroke="rgba(255, 255, 255, 1)" stroke-width="1.2500001192092896" stroke-linejoin="round" stroke-linecap="round" style="mix-blend-mode:normal" d="M10 17.5L20 17.5"></path>
                            <defs>
                                <linearGradient id="linear_fill_IMWBERT3n3aDfs4LJm1Bl_0" x1="6.9560546875" y1="5.7996826171875" x2="20.962890625" y2="26.18017578125" gradientUnits="userSpaceOnUse">
                                    <stop offset="0" stop-color="#4CB68F" />
                                    <stop offset="1" stop-color="#1F5CDA" />
                                </linearGradient>
                            </defs>
                        </svg>
                        <div class="boxRightBox1-p">${article.title}</div>
                    </div>
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="38" height="38" viewBox="0 0 38 38" fill="none">
                            <rect x="0" y="0" width="38" height="38" rx="8" style="mix-blend-mode:normal" fill="#000000"></rect>
                            <path fill-rule="evenodd" style="mix-blend-mode:normal" fill="url(#linear_fill_uIaTjcdE22yIxSATmFej8_0)" d="M22.8021 17.9718L18.0009 13.1705C17.4717 12.6414 16.6138 12.6414 16.0846 13.1705C15.5554 13.6997 15.5554 14.5576 16.0846 15.0868L19.9663 18.9685L15.9779 22.9569C15.4479 23.4869 15.4479 24.3462 15.9779 24.8762C16.5078 25.4062 17.3671 25.4062 17.8971 24.8762L22.6954 20.0779C22.8125 19.9609 22.9037 19.8277 22.969 19.6856C23.3237 19.1587 23.2681 18.4378 22.8021 17.9718Z"></path>
                            <path fill-rule="evenodd" style="mix-blend-mode:normal" fill="#FFFFFF" d="M22.8021 17.9718L18.0009 13.1705C17.4717 12.6414 16.6138 12.6414 16.0846 13.1705C15.5554 13.6997 15.5554 14.5576 16.0846 15.0868L19.9663 18.9685L15.9779 22.9569C15.4479 23.4869 15.4479 24.3462 15.9779 24.8762C16.5078 25.4062 17.3671 25.4062 17.8971 24.8762L22.6954 20.0779C22.8125 19.9609 22.9037 19.8277 22.969 19.6856C23.3237 19.1587 23.2681 18.4378 22.8021 17.9718Z"></path>
                            <defs>
                                <linearGradient id="linear_fill_uIaTjcdE22yIxSATmFej8_0" x1="12.3916015625" y1="18.4813232421875" x2="21.6259765625" y2="19.2353515625" gradientUnits="userSpaceOnUse">
                                    <stop offset="0" stop-color="#90F3CE" />
                                    <stop offset="1" stop-color="#3170F4" />
                                </linearGradient>
                            </defs>
                        </svg>
                    </div>
                </div>
                <div class="boxRightBox2">
                    ${article.content}
                </div>
                <div class="boxRightBox3">
                    <div style="display: flex; align-items: center; justify-content: flex-start; width: 300px">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M12 20.5C16.9706 20.5 21 16.339 21 13.5C21 10.661 16.9706 6.5 12 6.5C7.02945 6.5 3 10.6639 3 13.5C3 16.3361 7.02945 20.5 12 20.5Z" stroke="rgba(165, 179, 192, 1)" stroke-width="1" stroke-linejoin="round" style="mix-blend-mode:normal" fill-rule="evenodd" fill="#A5B3C0"></path>
                            <path d="M12 16.5C13.6568 16.5 15 15.1568 15 13.5C15 11.8432 13.6568 10.5 12 10.5C10.3432 10.5 9 11.8432 9 13.5C9 15.1568 10.3432 16.5 12 16.5Z" style="mix-blend-mode:normal" fill="#FFFFFF"></path>
                            <path stroke="rgba(165, 179, 192, 1)" stroke-width="1" stroke-linecap="round" style="mix-blend-mode:normal" d="M6.63184 5.63306L7.92909 7.44316"></path>
                            <path stroke="rgba(165, 179, 192, 1)" stroke-width="1" stroke-linecap="round" style="mix-blend-mode:normal" d="M17.8129 5.85522L16.5156 7.66537"></path>
                            <path stroke="rgba(165, 179, 192, 1)" stroke-width="1" stroke-linecap="round" style="mix-blend-mode:normal" d="M12.0049 3.5L12.0049 6.5"></path>
                        </svg>
                        <div class="boxRightBox3-p">浏览量：${article.view}</div>
                    </div>
                    <div style="display: flex; align-items: center; justify-content: flex-start;">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22Z" stroke="rgba(165, 179, 192, 1)" stroke-width="1" stroke-linejoin="round"  style="mix-blend-mode:normal" fill="#A5B3C0"></path>
                            <path stroke="rgba(255, 255, 255, 1)" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" style="mix-blend-mode:normal" d="M12.0045 6L12.0039 12.0044L16.2436 16.2441"></path>
                        </svg>
                        <div class="boxRightBox3-p">${article.createtime}</div>
                    </div>
                </div>
            </div>
            `;
        });
        
        document.getElementById('articleList').innerHTML = html;
    }

    // 渲染分页
    function renderPagination(data, currentPage) {
        // 检查是否有数据
        if (!data || !data.list || data.list.length === 0) {
            document.getElementById('paginationContainer').innerHTML = '';
            return;
        }
        
        // 检查总页数
        var totalPages = data.pages || 0;
        
        // 如果没有数据或总页数为0，显示暂无数据
        if (totalPages <= 0) {
            document.getElementById('paginationContainer').innerHTML = '';
            return;
        }
        
        var html = '<div class="pagination">';
        
        // 上一页
        if (currentPage > 1) {
            html += `<a href="javascript:loadArticles(${currentPage - 1})">&laquo; 上一页</a>`;
        }
        
        // 页码
        for (var i = 1; i <= totalPages; i++) {
            if (i == currentPage) {
                html += `<span class="current">${i}</span>`;
            } else {
                html += `<a href="javascript:loadArticles(${i})">${i}</a>`;
            }
        }
        
        // 下一页
        if (currentPage < totalPages) {
            html += `<a href="javascript:loadArticles(${currentPage + 1})">下一页 &raquo;</a>`;
        }
        
        html += '</div>';
        document.getElementById('paginationContainer').innerHTML = html;
    }

    // 更新搜索功能
    function searchArticles() {
        loadArticles(1); // 搜索时从第一页开始
    }

    // 更新分类筛选功能
    function filterByCategory(cateId) {
        // 更新URL参数并重新加载第一页
        var url = new URL(window.location);
        url.searchParams.set('ltcate_id', cateId);
        url.searchParams.set('page', 1);
        window.history.replaceState({}, '', url);
        loadArticles(1, cateId);
    }
    
    // 为分类列表添加的JavaScript函数
    function filterByCategoryJs(cateId) {
        // 更新选中状态
        updateCategorySelection(cateId);
        
        // 使用AJAX方式筛选分类
        filterByCategoryAjax(cateId);
    }
    
    // AJAX方式筛选分类
    function filterByCategoryAjax(cateId) {
        // 更新选中状态
        updateCategorySelection(cateId);
        
        // 更新URL参数
        var url = new URL(window.location);
        url.searchParams.set('ltcate_id', cateId);
        url.searchParams.set('page', 1);
        window.history.replaceState({}, '', url);
        
        // 加载对应分类的文章
        loadArticles(1, cateId);
    }
    
    // 更新分类选中状态
    function updateCategorySelection(cateId) {
        // 移除所有分类的选中样式
        var allCategoryItems = document.querySelectorAll('.box2');
        allCategoryItems.forEach(function(item) {
            // 移除选中样式
            var activeText = item.querySelector('.box2-1-menu-active-text');
            var activeIndicator = item.querySelector('.box2-1-menu-active');
            
            if (activeText) {
                activeText.classList.remove('box2-1-menu-active-text');
                activeText.classList.add('box2-p');
            }
            
            if (activeIndicator) {
                activeIndicator.remove();
            }
            
            // 恢复默认的SVG图标
            var svgContainer = item.querySelector('div');
            if (svgContainer && svgContainer.querySelector('svg')) {
                var newSVG = `
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path    style="mix-blend-mode:normal" fill="url(#linear_fill_Em19XiKxQN_8CIGEHSnXK_0)"  d="M21.0846 14.6226L14.6315 21.0756C14.294 21.4135 13.8358 21.6035 13.3581 21.6035C12.8803 21.6035 12.4222 21.4135 12.0845 21.0756L4 13L4 4L13 4L21.0846 12.0845C21.7825 12.7866 21.7825 13.9205 21.0846 14.6226Z">
                        </path>
                        <path    style="mix-blend-mode:normal" fill="#A5B3C0"  d="M21.0846 14.6226L14.6315 21.0756C14.294 21.4135 13.8358 21.6035 13.3581 21.6035C12.8803 21.6035 12.4222 21.4135 12.0845 21.0756L4 13L4 4L13 4L21.0846 12.0845C21.7825 12.7866 21.7825 13.9205 21.0846 14.6226Z">
                        </path>
                        <path d="M9.25 10.5C9.94035 10.5 10.5 9.94035 10.5 9.25C10.5 8.55965 9.94035 8 9.25 8C8 8.55965 8 9.25 8 9.25C8 9.94035 8.55965 10.5 9.25 10.5Z" fill-rule="evenodd" style="mix-blend-mode:normal" fill="#FFFFFF" >
                        </path>
                        <defs>
                            <linearGradient id="linear_fill_Em19XiKxQN_8CIGEHSnXK_0" x1="5.72265625" y1="6.322998046875" x2="18.0556640625" y2="20.6707763671875" gradientUnits="userSpaceOnUse">
                                <stop offset="0" stop-color="#4CB68F"  />
                                <stop offset="1" stop-color="#1F5CDA"  />
                            </linearGradient>
                        </defs>
                    </svg>`;
                svgContainer.innerHTML = newSVG;
            }
        });
        
        // 为选中的分类添加样式
        var selectedCategory = null;
        if (cateId == 0) {
            // 选中"全部"分类
            selectedCategory = document.querySelector('.box2[onclick*="filterByCategoryAjax(0)"]');
        } else {
            // 选中具体分类
            selectedCategory = document.querySelector('.box2[onclick*="filterByCategoryJs(' + cateId + ')"]');
        }
        
        if (selectedCategory) {
            // 查找文本元素并添加选中样式
            // 先尝试查找.box2-p元素
            var textElement = selectedCategory.querySelector('.box2-p');
            if (textElement) {
                textElement.classList.remove('box2-p');
                textElement.classList.add('box2-1-menu-active-text');
            } else {
                // 如果当前元素已经是选中状态（页面初始加载时），则不需要做任何操作
                // 检查是否已经有.box2-1-menu-active-text元素
                var activeTextElement = selectedCategory.querySelector('.box2-1-menu-active-text');
                if (!activeTextElement) {
                    // 如果没有找到任何文本元素，查找其他可能的文本元素
                    var allDivs = selectedCategory.querySelectorAll('div');
                    for (var i = 0; i < allDivs.length; i++) {
                        var div = allDivs[i];
                        // 排除图标和指示器元素
                        if (!div.classList.contains('box2-1-menu-active') && 
                            !div.querySelector('svg')) {
                            // 确保元素没有.box2-p类后再添加
                            if (!div.classList.contains('box2-p')) {
                                div.classList.add('box2-1-menu-active-text');
                            }
                            break;
                        }
                    }
                }
            }
            
            // 替换SVG图标为选中状态的图标
            var svgContainer = selectedCategory.querySelector('div');
            if (svgContainer && svgContainer.querySelector('svg')) {
                var newSVG = `
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path    style="mix-blend-mode:normal" fill="url(#linear_fill_5VuJbBq8xxYoovG1rHJ3f_0)"  d="M21.0846 14.6226L14.6315 21.0756C14.294 21.4135 13.8358 21.6035 13.3581 21.6035C12.8803 21.6035 12.4222 21.4135 12.0845 21.0756L4 13L4 4L13 4L21.0846 12.0845C21.7825 12.7866 21.7825 13.9205 21.0846 14.6226Z">
                        </path>
                        <path    style="mix-blend-mode:normal" fill="#FFFFFF" fill-opacity="0.11" d="M21.0846 14.6226L14.6315 21.0756C14.294 21.4135 13.8358 21.6035 13.3581 21.6035C12.8803 21.6035 12.4222 21.4135 12.0845 21.0756L4 13L4 4L13 4L21.0846 12.0845C21.7825 12.7866 21.7825 13.9205 21.0846 14.6226Z">
                        </path>
                        <path d="M9.25 10.5C9.94035 10.5 10.5 9.94035 10.5 9.25C10.5 8.55965 9.94035 8 9.25 8C8 8.55965 8 9.25 8 9.25C8 9.94035 8.55965 10.5 9.25 10.5Z" fill-rule="evenodd" style="mix-blend-mode:normal" fill="#FFFFFF" >
                        </path>
                        <defs>
                            <linearGradient id="linear_fill_5VuJbBq8xxYoovG1rHJ3f_0" x1="5.72265625" y1="6.322998046875" x2="18.0556640625" y2="20.6707763671875" gradientUnits="userSpaceOnUse">
                                <stop offset="0" stop-color="#4CB68F"  />
                                <stop offset="1" stop-color="#1F5CDA"  />
                            </linearGradient>
                        </defs>
                    </svg>`;
                svgContainer.innerHTML = newSVG;
            }
            
            // 添加选中指示器
            var indicator = document.createElement('div');
            indicator.className = 'box2-1-menu-active';
            selectedCategory.appendChild(indicator);
        }
    }
</script>

<style>
    /* 添加分页样式 */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        gap: 10px;
    }
    
    .pagination a {
        padding: 8px 12px;
        background: #f0f0f0;
        color: #333;
        text-decoration: none;
        border-radius: 4px;
    }
    
    .pagination a:hover {
        background: #007bff;
        color: white;
    }
    
    .pagination .current {
        padding: 8px 12px;
        background: #007bff;
        color: white;
        border-radius: 4px;
    }

    .boxone {
        width: 100%;
        padding: 40px 0;
        background: rgba(235, 238, 241, 1);
    }
    .boxRightBox{
        padding: 30px;
        border: 1px solid rgba(215, 215, 215, 1);
        margin-bottom: 30px;
        cursor: pointer;
    }
    .boxRightActive{
        border-top: 10px solid rgba(0,0,0);
        background: rgba(237, 241, 244, 1) !important;
    }
    .boxRightBox1{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .boxRightBox2{
        margin-top: 20px;
        /** 文本1 */
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 30px;
        color: rgba(0, 0, 0, 1);
        vertical-align: top;
        width: 100%; /* 设置容器宽度为100% */
        display: -webkit-box; /* 使用弹性盒子布局 */
        -webkit-line-clamp: 5; /* 最多显示5行 */
        -webkit-box-orient: vertical; /* 设置排列方式为垂直 */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis; /* 溢出部分显示省略号 */
    }
    .boxRightBox3{
        display: flex;
        margin-top: 20px;
    }
    .boxRightBox3-p{
        /** 文本1 */
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 21.1px;
        color: rgba(165, 179, 192, 1);
        vertical-align: middle;
    }
    .boxRightBox1-p{
        /** 文本1 */
        font-size: 28px;
        font-weight: 400;
        margin-left: 20px;
        letter-spacing: 0px;
        line-height: 32.82px;
        color: rgba(0, 0, 0, 1);
        vertical-align: middle;
    }
    .boxContainer {
       width: 1200px;
        margin: 0px auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    .boxLeft {
        width: 239px;
        opacity: 1;
        background: rgba(255, 255, 255, 1);
    }
    .box1{
        padding:30px 20px;
        display: flex;
        width: 239px;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid rgba(235, 238, 241, 1);
    }
    .box2{
        padding:20px;
        display: flex;
        width: 239px;
        padding-left: 20px;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        cursor: pointer;
    }
    .active{font-size: 10px !important}
    .box2:hover {
        background: rgba(245, 245, 245, 1);
    }
    .box2.active {
        background: rgba(240, 248, 255, 1);
    }
    .box1-p{
        font-size: 28px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 32.82px;
        color: rgba(0, 0, 0, 1);
        vertical-align: middle;
        margin-left: 20px;
    }
    .box2-p{
        line-height: 32.82px;
        color: rgba(165, 179, 192, 1);
        vertical-align: middle;
        margin-left: 20px;
        font-size: 22px;
        font-weight: 400;
        letter-spacing: 0px;
    }

    .box2-1-menu-active {
        width: 20px;
        height: 4px;
        opacity: 1;
        position: absolute;
        left: 58px;
        top: 58px;
        z-index:11 ;
        margin-left: 10px;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.11)), linear-gradient(139.34deg, rgba(144, 243, 206, 1) 0%, rgba(49, 112, 244, 1) 100%);
    }
    .box2-1-menu-active-text {
        /* 设置渐变背景 */
        background: linear-gradient(45deg, rgba(144, 243, 206, 1), rgba(49, 112, 244, 1));

        /* 将背景裁剪到文字区域 */
        -webkit-background-clip: text;
        background-clip: text;

        /* 使文字颜色透明，显示背景渐变 */
        -webkit-text-fill-color: transparent;
        -webkit-text-fill-color: transparent;

        /* 可选：增加文字粗细和大小增强效果 */
        font-weight: bold;
        line-height: 32.82px;
        margin-left: 20px;
        font-size: 22px;
        letter-spacing: 0px;
    }
    .boxRight {
        padding: 30px;
        width: 941px;
        background: rgba(255, 255, 255, 1);
    }

    .box {
        width: 1200px;
        height: 120px;
        opacity: 1;
        border-radius: 140px;
        background: rgba(255, 255, 255, 1);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }

    input:focus {
        outline: none;
    }

    /* 标准写法 */
    input::placeholder {
        color: rgba(187, 196, 200, 1);
        font-size: 26px;
    }

    .boxInput {
        width: 1000px;
        height: 100px;
        line-height: 120px;
        padding-left: 60px;
        font-size: 26px;
        font-weight: 400;
        border-radius: 140px;
        border: 0;
        letter-spacing: 0px;
        color: rgba(187, 196, 200, 1);
        vertical-align: middle
    }

    .boxright {
        width: 280px;
        height: 100px;
        opacity: 1;
        border-radius: 140px;
        background: rgba(2, 4, 5, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .boxrightp {
        /** 文本1 */
        font-size: 26px;
        font-weight: 600;
        letter-spacing: 0px;
        line-height: 36.4px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        vertical-align: middle;
        margin-left: 20px;
    }

    .boxright:hover {
        opacity: 0.8;
        transition: opacity 0.3s ease;
    }
    .no-data{
           color: rgba(165, 179, 192, 1);
           font-size: 18px;
    }
    
    /* deal-content 响应式设计 */
    .deal-content {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .splitcontent {
        font-size: 32px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 37.5px;
        color: rgba(255, 255, 255, 1);
        vertical-align: top;
        text-align: center;
        padding: 20px 0;
    }
    
    .box {
        width: 100%;
        max-width: 1200px;
        height: 120px;
        opacity: 1;
        border-radius: 140px;
        background: rgba(255, 255, 255, 1);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        box-sizing: border-box;
    }
    
    /* 标准写法 */
    input::placeholder {
        color: rgba(187, 196, 200, 1);
        font-size: 26px;
    }
    
    .boxInput {
        width: 100%;
        max-width: 1000px;
        height: 100px;
        line-height: 120px;
        padding-left: 60px;
        font-size: 26px;
        font-weight: 400;
        border-radius: 140px;
        border: 0;
        letter-spacing: 0px;
        color: rgba(187, 196, 200, 1);
        vertical-align: middle;
        box-sizing: border-box;
    }
    
    .boxright {
        width: 280px;
        height: 100px;
        opacity: 1;
        border-radius: 140px;
        background: rgba(2, 4, 5, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    .boxrightp {
        /** 文本1 */
        font-size: 26px;
        font-weight: 600;
        letter-spacing: 0px;
        line-height: 36.4px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        vertical-align: middle;
        margin-left: 20px;
    }
    
    .boxright:hover {
        opacity: 0.8;
        transition: opacity 0.3s ease;
    }
    
    /* 响应式设计 - 手机和电脑自适应 */
    @media (max-width: 1200px) {
        .deal-content {
            background-size: cover;
            background-position: center;
        }
        
        .splitcontent {
            font-size: 28px;
            padding: 15px 0;
        }
        
        .box {
            flex-direction: column;
            height: auto;
            border-radius: 20px;
            padding: 20px;
            max-width: 90%;
        }
        
        .boxInput {
            width: 100%;
            max-width: none;
            height: 80px;
            line-height: 80px;
            padding-left: 20px;
            font-size: 20px;
            margin-bottom: 15px;
        }
        
        .boxright {
            width: 100%;
            height: 80px;
            border-radius: 20px;
        }
        
        .boxrightp {
            font-size: 20px;
            margin-left: 10px;
        }
    }
    
    @media (max-width: 768px) {
        .deal-content {
            background-size: cover;
            background-position: center;
        }
        
        .splitcontent {
            font-size: 24px;
            padding: 12px 0;
        }
        
        .box {
            max-width: 95%;
            padding: 15px;
        }
        
        .boxInput {
            height: 70px;
            line-height: 70px;
            font-size: 18px;
            padding-left: 15px;
        }
        
        .boxright {
            height: 70px;
        }
        
        .boxrightp {
            font-size: 18px;
            margin-left: 8px;
        }
    }
    
    @media (max-width: 480px) {
        .splitcontent {
            font-size: 20px;
            padding: 10px 0;
        }
        
        .box {
            padding: 12px;
            border-radius: 15px;
        }
        
        .boxInput {
            height: 60px;
            line-height: 60px;
            font-size: 16px;
            padding-left: 12px;
        }
        
        .boxright {
            height: 60px;
            border-radius: 15px;
        }
        
        .boxrightp {
            font-size: 16px;
            margin-left: 6px;
        }
    }
    
    /* 超小屏幕优化 */
    @media (max-width: 375px) {
        .splitcontent {
            font-size: 18px;
        }
        
        .boxInput {
            font-size: 14px;
        }
        
        .boxrightp {
            font-size: 14px;
        }
    }
    
    /* 防止水平滚动条出现 */
    @media (max-width: 768px) {
        html, body {
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
        }
        
        * {
            box-sizing: border-box;
        }
        
        .deal-content {
            width: 100%;
            max-width: 100vw;
            overflow-x: hidden;
        }
        
        .deal-content > div {
            width: 100%;
            max-width: 100%;
            padding-left: 15px;
            padding-right: 15px;
            box-sizing: border-box;
        }
        
        .box {
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 15px;
        }
        
        .boxInput {
            width: 100%;
            max-width: 100%;
            padding-left: 15px;
            padding-right: 15px;
            box-sizing: border-box;
        }
        
        .boxright {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        .boxContainer {
            width: 100%;
            max-width: 100%;
            padding: 0 15px;
            box-sizing: border-box;
        }
        
        .boxLeft, .boxRight {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        .boxRightBox {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        .boxRightBox1, .boxRightBox2, .boxRightBox3 {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
    }
    
    /* 响应式设计 - 手机等比例缩小 */
    @media (max-width: 768px) {
        .boxone {
            padding: 20px 0;
        }
        
        .boxContainer {
            flex-direction: column;
            align-items: center;
            padding: 0 15px;
        }
        
        .boxLeft {
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
        }
        
        .box1, .box2 {
            width: 100%;
        }
        
        .boxRight {
            width: 100%;
            max-width: 100%;
            padding: 20px;
        }
        
        .boxRightBox {
            padding: 15px;
            margin-bottom: 15px;
        }
        
        .boxRightBox1-p {
            font-size: 18px;
            line-height: 1.3;
        }
        
        .boxRightBox2 {
            font-size: 14px;
            line-height: 1.4;
            margin-top: 15px;
            -webkit-line-clamp: 3;
        }
        
        .boxRightBox3 {
            margin-top: 15px;
            flex-direction: column;
            gap: 8px;
        }
        
        .boxRightBox3-p {
            font-size: 12px;
        }
        
        .box1-p {
            font-size: 20px;
        }
        
        .box2-p, .box2-1-menu-active-text {
            font-size: 16px;
        }
        .box2-1-menu-active {
            width: 20px;
            height: 4px;
            opacity: 1;
            position: absolute;
            left: 48px;
            top: 45px;
            z-index:11 ;
            margin-left: 10px;
            background: linear-gradient(0deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.11)), linear-gradient(139.34deg, rgba(144, 243, 206, 1) 0%, rgba(49, 112, 244, 1) 100%);
        }
        
        .box2 {
            padding: 15px;
        }
    }
    
    @media (max-width: 480px) {
        .boxone {
            padding: 15px 0;
        }
        
        .boxContainer {
            padding: 0 10px;
        }
        
        .boxRightBox {
            padding: 12px;
            margin-bottom: 12px;
        }
        
        .boxRightBox1-p {
            font-size: 16px;
        }
        
        .boxRightBox2 {
            font-size: 13px;
            line-height: 1.3;
            -webkit-line-clamp: 2;
        }
        
        .boxRightBox3-p {
            font-size: 11px;
        }
        
        .box1-p {
            font-size: 18px;
        }
        
        .box2-p, .box2-1-menu-active-text {
            font-size: 15px;
        }
        
        .box2 {
            padding: 12px;
        }
    }
    
    /* 超小屏幕优化 */
    @media (max-width: 375px) {
        .boxRightBox1-p {
            font-size: 15px;
        }
        
        .boxRightBox2 {
            font-size: 12px;
        }
        
        .boxRightBox3-p {
            font-size: 10px;
        }
        
        .box1-p {
            font-size: 16px;
        }
        
        .box2-p, .box2-1-menu-active-text {
            font-size: 14px;
        }
    }
    </style>